<script setup lang="ts">
import { reactive, onMounted } from 'vue'
import { getOnlineUsers, forceOffline } from '@/api/monitor'
import { getUserPageAuth } from '@/api/system/authority'
import { hasElementAuth } from '@/utils/authority'
import { getCurUser } from '@/utils'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useI18n } from '@/hooks/web/useI18n'

defineOptions({
  name: 'LoginList'
})

const { t } = useI18n()
const { currentRoute } = useRouter()
//当前语言
const state = reactive({
  // 表格數據
  viewTable: [{}],
  curUserId: '',
  pageAuths: [{}]
})
onMounted(async () => {
  search()
  let muid = currentRoute.value.meta.id as string
  state.pageAuths = (await getUserPageAuth(muid)).data
  state.curUserId = getCurUser().userId
})

//查询列表数据
const search = async () => {
  await getOnlineUsers()
    .then((res) => {
      const result = res as any
      state.viewTable = result.data
    })
    .catch(() => {})
}
//时间戳格式化为日期时间
const formatDate = (timeStamp): string => {
  const dateTime = new Date(timeStamp)
  return dateTime.toLocaleString('zh-CN', { hour12: false })
}
//强制下线
const offline = (userId, userName) => {
  ElMessageBox.confirm(t('loginLog.confirm') + ' (' + userName + ')', t('common.delWarning'), {
    confirmButtonText: t('common.ok'),
    cancelButtonText: t('common.cancel'),
    type: 'warning'
  })
    .then(async () => {
      await forceOffline(userId).then((res) => {
        const result = res as any
        ElMessage.info(t(result.message))
        if (result.success) {
          search()
        }
      })
    })
    .catch(() => {})
}
</script>
<template>
  <!-- 搜索列表卡片 -->
  <el-card>
    <!-- 表頭按鈕 -->
    <el-row id="topBtnRight">
      <el-button type="info" size="small" plain @click="search">
        <Icon icon="tabler:refresh" /><span>{{ $t('common.refresh') }}</span></el-button
      >
    </el-row>
    <!-- 搜索結果表格 -->
    <el-table
      :data="state.viewTable"
      row-key="userId"
      default-expand-all
      style="width: 100%"
      tooltip-effect="light"
      stripe
      :header-cell-style="{
        background: 'var(--el-color-primary-light-9)',
        color: '#409eff'
      }"
    >
      <el-table-column type="index" min-width="60">
        <template #header>
          <div style="margin-bottom: -10px">
            <Icon icon="ant-design:field-number-outlined" size="24" :title="$t('common.number')"
          /></div>
        </template>
      </el-table-column>
      <el-table-column
        prop="account"
        :label="$t('user.account')"
        show-overflow-tooltip
        min-width="90"
      />
      <el-table-column prop="fullName" :label="$t('user.name')" min-width="90" />
      <el-table-column prop="userCode" :label="$t('user.code')" min-width="90" />
      <el-table-column prop="mobile" :label="$t('user.mobile')" min-width="110" />
      <el-table-column prop="ipAddr" :label="$t('monitor.ipAddr')" min-width="120" />
      <el-table-column prop="timeMillis" :label="$t('loginLog.lastTime')" min-width="200">
        <template #default="{ row }">
          {{ formatDate(row.timeMillis) }}
        </template></el-table-column
      >
      <el-table-column
        prop="clientType"
        :label="$t('menu.clientType')"
        min-width="100"
        align="center"
      >
        <template #default="{ row }">
          <span v-if="row.clientType == 1">H5</span>
          <span v-else-if="row.clientType == 2">Android</span>
          <span v-else-if="row.clientType == 4">IOS</span>
          <span v-else>PC</span>
        </template></el-table-column
      >

      <el-table-column fixed="right" :label="$t('common.operation')" width="100">
        <template #default="{ row }">
          <el-button
            type="danger"
            size="small"
            plain
            circle
            :title="$t('loginLog.offline')"
            @click="offline(row.userId, row.account)"
            v-if="
              hasElementAuth(state.pageAuths, 'offline') &&
              !row.admin &&
              state.curUserId != row.userId
            "
          >
            <Icon icon="ion:cloud-offline" />
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
<style lang="less" scoped>
.el-table {
  font-size: 12px;
}
//搜索條樣式
.input-with-select {
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}

:deep(.el-input-group__append) {
  background-color: #ecf5ff;
  border-color: #a0cfff;
  color: #409eff;
  box-shadow: #409eff;
  cursor: pointer;
}

:deep(.el-input-group__append):hover {
  background-color: #ecf5ff;
  border-color: #409eff !important;
  color: #409eff;
  box-shadow: #409eff;
  cursor: pointer;
}

.el-col {
  /* padding: 0; */
  line-height: 56px;

  .radioOne {
    position: relative;
    left: 5px;
  }

  .radioTwo {
    position: relative;
    left: -27px;
  }

  p {
    margin-left: 5px;
    text-align: left;
    font-size: 12px;
    position: relative;
    bottom: -10px;
  }

  .remark {
    font-size: 12px;
    color: #6e6e6e;
    padding-left: 5px;
  }
}

.demo-pagination-block {
  display: flex;
  justify-content: center;
  justify-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
}
</style>
